import { inject, observer } from 'mobx-react'
import React, { FC, useEffect } from 'react'
import Myhead from '../../../components/myhead'
import { Image, List,Avatar } from 'antd-mobile'
import { baseURL } from '../../../api/request'
import moment from 'moment' 
import './advise.scss'
import { Tag } from 'antd'
import {
  DingtalkOutlined
} from '@ant-design/icons';
import { vipList } from '../../../utils'
import { useNavigate } from 'react-router-dom'
const Advise:FC<any>=({
  advise
})=> {
  const {adviseList,getAdviseList,changeadvise}=advise
  const navigate = useNavigate()
  useEffect(()=>{
    getAdviseList()
  },[])
  // console.log(adviseList);
  //点击查看，携带——id进入详情页
  const gotoDetailed=(item:any)=>{
    navigate('/detailed/adviseDetailed/'+item._id)
    }
  
  return (
    
    <div className='paddingtop adviseStyle' style={{marginBottom:"0.44rem"}}>
      <Myhead title="建议列表"></Myhead>
        {
          adviseList&&<List
          
          >
            {adviseList.map((advise:any) => (
              
              <List.Item
              onClick={()=>gotoDetailed(advise)}
                key={advise._id}
                prefix={
                  advise.info.avatar?<Avatar src={advise.info.avatar.replace(/public/,baseURL)} style={{ '--size': '32px' }} />:<Avatar src={require('../../../assets/images/xiaoxin_2.jpg')}></Avatar>
                }
                description={<div 
                style={{fontSize:13,color:"#666"}}
                dangerouslySetInnerHTML={{__html:advise.content }}>
                {/* 转义成html */}
                </div>}
              >
                <div>
                  <span style={{fontSize:14}}>{advise.info.username}</span>
                  <span style={{marginLeft:20}}>
                    
                       <Tag icon={<DingtalkOutlined />} color={vipList.find(v=>v.value==advise.info.role)?.color}>
                       {vipList.find(v=>v.value==advise.info.role)?.label}

                       </Tag>
                  </span>
                </div>
                <div>
                  <span style={{fontSize:12,color:"#999"}}>{moment(advise.time).format("YYYY-MM-DD HH:mm")}</span>
                  <span style={{fontSize:12,color:"#999",marginLeft:5}}>留下建议：</span>
                  </div>
                
              </List.Item>
            ))}
          </List>
        }
        <div style={{height:"0.44rem"}}></div>
    </div>
  )
}

export default inject('advise')(observer(Advise))
